<template>
  <view class="content">
    <cos-header title="导航栏组件" :background-color="backgroundColor" :font-color="fontColor" :fixed="fixed">
    </cos-header>
    <image src="/static/sync_bg.jpg" mode="" style="width: 100vw;"></image>
    <div v-for="item in 100" :key="item">
      {{ item }}
    </div>
  </view>
</template>

<script setup lang="ts">
onShareAppMessage(() => ({
  title: '自定义头部',
  path: '/pagesA/cosHeader/gradient'
}));

const backgroundColor = ref('')
const fontColor = ref('#fff')
const fixed = ref(true)

onPageScroll((e) => {
  console.log('e', e.scrollTop)
  if (e.scrollTop < 5) {
    fontColor.value = '#fff'
    backgroundColor.value = ''
  } else if (e.scrollTop < 50) {
    const rate = e.scrollTop / 50
    backgroundColor.value = `rgba(255,255,255, ${rate})`
    fontColor.value = `rgba(0,0,0, ${rate})`
  } else {
    backgroundColor.value = 'rgba(255,255,255)'
    fontColor.value = 'rgba(0,0,0)'
  }
})
</script>

<style></style>
